<template>
  <div class="list-table">
    <div class="meetingReserve">
      <el-button size="small" plain @click="changeWeek(0)">{{ $t('本周') }}</el-button>
      <h2>{{ $t('预定会议') }}</h2>
      <el-button size="small" plain @click="changeWeek(-1)">{{ $t('上一周') }}</el-button>
      <el-button size="small" plain @click="changeWeek(1)">{{ $t('下一周') }}</el-button>
    </div>
    <el-table
      :data="oaMeetingRoomList"
      class="initTable"
    >
      <el-table-column
        v-for="(item,index) in listHeader"
        :key="index"
        align="center"
        :prop="item"
        :label="item"
        :show-overflow-tooltip="true"
      >
        <template slot-scope="scope">
          <a v-if="index === 0">{{ scope.row.name }}</a>
          <a v-else v-hasPermi="['oa:meetingReserve:edit']" class="link_a" @click="orderRoom(scope.row.id,item)">预定</a>
        </template>
      </el-table-column>

    </el-table>
    <el-dialog title="预订会议室" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm">
      <meetingRoomReserveForm ref="oaMeetingRoomReserveForm" />
    </el-dialog>
  </div>
</template>
<script>
import meetingRoomReserveForm from './oaMeetingRoomReserveForm.vue'
import { listOaMeetingRoom } from '@/api/oa/meeting/oaMeetingRoom'
export default {
  components: {
    meetingRoomReserveForm
  },
  data() {
    return {
      listHeader: ['会议室'],
      oaMeetingRoomList: [],
      meetingDate: undefined,
      formOpen: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        place: undefined,
        meetingDate: undefined
      }
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    this.changeWeek(0)
  },
  methods: {
    /** 查询会议室列表 */
    getList() {
      this.loading = true
      listOaMeetingRoom(this.queryParams).then(response => {
        this.oaMeetingRoomList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    orderRoom(row, item) {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.oaMeetingRoomReserveForm.initRoom(row, item)
      })
    },
    changeWeek(status) {
      this.listHeader = ['会议室']
      this.thead = []
      this.getMonday(status)
    },
    getMonday(dates) {
       let weekOne = ''
      const todayTimeStr = new Date(new Date().toLocaleDateString()).getTime()
      const day = (new Date().getDay() - 1) * 24 * 60 * 60 * 1000
      if (dates === 0) { // 本周
        weekOne = todayTimeStr - day// 周一 0点的时间戳
      }
      // 一天的时间戳
      const dayTime = 24 * 60 * 60 * 1000
      if (dates === -1) { // 上一周
        weekOne = this.weekTime - 7 * 24 * 60 * 60 * 1000
      } else if (dates === 1) { // 下一周
        weekOne = this.weekTime + 7 * 24 * 60 * 60 * 1000
      }
      this.weekTime = weekOne
      for (let i = 0; i < 7; i++) {
        const timeOne_year = new Date(new Date(weekOne + i * dayTime)).getFullYear()
        const timeOne_month = new Date(new Date(weekOne + i * dayTime)).getMonth() + 1 >= 10 ? new Date(new Date(weekOne + i *
          dayTime)).getMonth() + 1 : '0' + (new Date(new Date(weekOne + i *
          dayTime)).getMonth() + 1)
        const timeOne_date = new Date(new Date(weekOne + i * dayTime)).getDate() >= 10 ? new Date(new Date(weekOne + i *
          dayTime)).getDate() : '0' + new Date(new Date(weekOne + i *
          dayTime)).getDate()
        this.listHeader.push(timeOne_year + '-' + timeOne_month + '-' + timeOne_date)
      }
      console.log(this.listHeader)
      return this.listHeader
    }
  }
}
</script>
